<template>
    <div class="userManager">
        <div style="height: 100px;display: flex;align-items: center;justify-content: center">
            <el-input style="width: 40%" prefix-icon="el-icon-search" placeholder="根据用户名进行搜索" v-model="search.clauses[0].value">
                <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
            </el-input>
        </div>
        <div style="display: flex;align-items: center;width: 100%;margin-left: 60px">
            <div style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;">
                <user-demo v-for="(item,index) in tableData" :key="index"  :user-data="item" style="margin: 12px" @edit-user="editUser"  @delete-user="deleteUser"></user-demo>
            </div>
        </div>
        <div style="height: 40px;width:600px;position:fixed ;right: 0;bottom: 0;z-index: 999;line-height: 40px">
            <el-pagination
                    style="float: right;"
                    background
                    :page-size="search.pageSize"
                    @current-change="changePage"
                    @prev-click="changePage"
                    @next-click="changePage"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
        <el-button class="user-add" icon="el-icon-plus" type="danger" circle @click="addUser"></el-button>
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-form label-width="10%" :model="userData" :rules="userRules" :ref="userData" >
                <el-form-item style="padding: 0px 30%;;" label-width="0">
                    <template>
                        <upload-img v-model="userData.photo"></upload-img>
                    </template>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名"  prop="userName" label-width="20%">
                            <el-input v-model="userData.userName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="角色" label-width="30%">
                            <el-select v-model="userData.roleId" :value="userData.roleId" placeholder="请选择">
                                <el-option v-for="item in roleList" :key="item.id" :label="item.remark" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="性别" style="padding: 0 10px;"  prop="sex">
                    <el-radio-group v-model="userData.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="账户" style="padding: 0 10px"  prop="account">
                    <el-input v-model="userData.account"></el-input>
                </el-form-item>
                <el-form-item>

                </el-form-item>
                <el-form-item label="电话" style="padding: 0 10px"  prop="phone">
                    <el-input v-model="userData.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" style="padding: 0 10px" prop="email">
                    <el-input v-model="userData.email"></el-input>
                </el-form-item>
                <el-form-item label="信用" style="padding: 0 10px" prop="credit">
                    <el-input v-model.Number="userData.credit"></el-input>
                </el-form-item>
                <el-form-item label="余额" style="padding: 0 10px" prop="balance">
                    <el-input v-model.Number="userData.balance"></el-input>
                </el-form-item>
                <el-form-item label="密码" style="padding: 0 10px" prop="balance" v-show="currentUser.account === 'admin'">
                    <el-input type="password" v-model="userData.password"></el-input>
                </el-form-item>
                <el-form-item label-width="60%">
                    <el-button  size="small" @click="dialogVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="submit(userData)">确 定</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

    </div>
</template>

<script>
    import UserDemo from '../../../components/User'
    import Message from '../../../components/messages'
    import UploadImg from '../../../components/upload/UploadImg'
    import Config from '../../../config'
    export default {
        name: "UserManager",
        data(){
            const validateUser = (rule, value, callback)=>{
                value = value.split(" ").join("");
                if (value === '') {
                    callback(new Error('请输入有效值'));
                }else if (value.length<3) {
                    callback(new Error('字段名太短'));
                }else {
                    callback();
                }
            };
            return{
                userData:{
                    id:"",
                    userName:"",
                    account:"",
                    phone:"",
                    password:"",
                    credit:0,
                    balance:"",
                    email:"",
                    photo:""
                },
                search:{
                    pageSize:12,
                    pageNum:1,
                    clauses:[
                        {
                            column:"userName",
                            operation:"like",
                            value:""
                        }
                    ],
                    sortMap:{}
                },
                total:0,
                title:"",
                domain: Config.domain,
                dialogVisible:false,
                userRules:{
                    userName: [
                        { validator: validateUser, trigger: 'blur' }
                    ],
                    account: [
                        { validator: validateUser, trigger: 'blur' }
                    ],
                    phone: [
                        { validator: validateUser, trigger: 'blur'}
                    ]
                },
                tableData: [],
                imgUrl:"",
                currentUser:{},
                roleList:[]
            }
        },
        methods:{
            handleClose(){
                this.userData = {};
                this.dialogVisible = false;
            },
            changePage(val){
                this.search.pageNum = val;
                this.getList();
            },
            editUser(data){
                this.title = "修改用户";
                this.userData = data;
                this.dialogVisible = true;
            },
            addUser(){
                this.title = "添加用户";
                this.userData = {};
                this.dialogVisible = true;
            },
            submit(data){
                console.log(data);
                if (data.id==null){
                    this.$http.post("/user/add",data).then(res=>{
                        if (res.status===200){
                            Message.success(res.data.account+"添加成功");
                            this.dialogVisible = false;
                            this.getList();
                        }
                    })
                }else{
                    this.$http.post("/user/update",data).then(res=>{
                        if (res.status===200){
                            Message.success(res.data.account+"修改成功");
                            this.dialogVisible = false;
                            this.getList();
                        }
                    })
                }

            },
            deleteUser(data){
                Message.confirm("是否需要删除该用户？").then(()=>{
                    this.$http.get("/user/delete/"+data).then(res=>{
                        if (res.status===200){
                            Message.success("删除成功");
                            this.getList();
                        }
                    })
                })

            },
            getList(){
                this.$http.post("/user/page",this.search).then(response=>{
                   if (response.status===200){
                       this.tableData = response.data.list;
                       this.total=response.data.total;
                   }
                })
            },
            getAllRoles(){
                this.$http.get("/role/all").then(res=>{
                    if (res.status===200){
                        this.roleList = res.data;
                        console.log(this.roleList)
                    }
                })
            }
        },
        components:{
            UserDemo,UploadImg
        },
        mounted(){
            this.getList();
            this.currentUser = JSON.parse(localStorage.getItem("user"));
            this.getAllRoles();
        },
        returnImgUrl:function () {
            if (this.userData.photo !== ""){
                return this.domain+this.userData.photo;
            } else {
                return ""
            }
        }
    }
</script>

<style scoped lang="less">
    .userManager{
        width: 100%;
        height: calc(~'100vh - 110px');
        overflow-x: hidden;
        .user-add{
            position: fixed;
            right: 86px;
            bottom: 144px;
            width: 80px;
            height: 80px;
            font-size: 40px;
        }
    }
</style>